<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box{
      width: 220px;
      height: 500px;
      background-color: #84a9b3;
    }
    .head{
      font-weight:bold;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      padding-left: 20px;
      color: #a5d9e2;
    }
    .menu_outer{
      padding-left: 40px;
      height: 28px;
      font-size: 16px;
      font-weight:bold;
      color: #a5d9e2;
      display: none;
    }
    .menu{
      display: none;
      margin-top: -12px;
    }
    .menu ul{
      padding-left: 40px;
      list-style-type: none;
    }
    .menu ul li{
      font-size: 14px;
      line-height: 20px;
      color: #a5d9e2;
    }
  </style>
</head>
<body>
  <div class="box_outer" id="box_outer">
    <div class="box" id="box">
      <div class="head" id="head" onclick="ycit()">
        <span>深圳市</span>
      </div>
      <div class="menu_outer" id="menu_outer" onclick="fn()">
        <span>宝安区</span>
      </div>
      <div class="menu" id="menu" >
        <ul>
          <li>信濠精密</li>
          <li>信濠光电</li>
          <li>雅达电源制品</li>
          <li>艾美特电气</li>
          <li>宝安区安全生产监督管理</li>
          <li>宝安人民医院</li>
          <li>宝安小学</li>
          <li>大浪社区工作站</li>
          <li>固戍污水厂</li>
          <li>海滨中学</li>
          <li>昊阳天宇</li>
          <li>惠亚电子</li>
          <li>深圳报业集团宝安印务</li>
          <li>深圳市七月文化传播</li>
          <li>新安街道安监</li>
          <li>新安中学（初中部）</li>
          <li>新安中学（高中部）</li>
        </ul>
      </div>
    </div>
  </div>

  <script>
    function ycit() {
      var zt = document.getElementById("menu_outer").style.display;
      if (zt == "none")
        document.getElementById("menu_outer").style.display = "block";
      else
        document.getElementById("menu_outer").style.display = "none";
        document.getElementById("menu").style.display = "none";
    }

    function fn() {
      var zt1 = document.getElementById("menu").style.display;
      if (zt1 == "none")
        document.getElementById("menu").style.display = "block";
      else
        document.getElementById("menu").style.display = "none";
    }

  </script>
</body>
</html>
